<template>
  <div class="appendStore">
    <div v-for="(item,index) in appendData" :key="index" class="item" :style="item.type === 'input'?'display: flex;align-items: flex-start;':''">
      <div class="itemName"><div v-if="item.must" style="color: red">*</div>{{item.name}}：</div>
      <div v-if="item.type === 'input'">
        <a-textarea style="width: 200px" v-model="item.val" :placeholder="item.place" />
      </div>
      <div v-if="item.type === 'select'">
        <a-select
          show-search
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @change="e=>{selectChange(index,e)}"
          :value="item.val?item.val:undefined"
          :placeholder="item.place"
          allowClear
        >
          <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
            {{demo[item.nameKey]}}
          </a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'appendStore',
    props:{
      appendData: Array
    },
    methods:{
      selectChange(index,idx){
        this.appendData[index].val = idx;
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      sendData(){
        let configData = {};
        for(let i=0;i<this.appendData.length;i++){
          if(this.appendData[i].must && !this.appendData[i].val) return this.$message.info(this.appendData[i].place);
          configData[this.appendData[i].key] = this.appendData[i].val
        }
        this.$emit('sendData',configData);
      }
    }
  }
</script>
<style lang="less" scoped>
  .appendStore{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .itemName{
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 100px;
        justify-content: flex-end;
      }
    }
  }
</style>
